<template>
  <div>
    <el-container class="manager-container">

      <el-main height="">
        <!-- Main content -->
        <!-- 面包屑 -->
        <!-- <div class="bg-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/teacher/teacherhomepage' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>教师打分管理</el-breadcrumb-item>
              <el-breadcrumb-item>打分页面</el-breadcrumb-item>
          </el-breadcrumb>
        </div> -->
        <el-button type="primary" size="medium" plain @click="goBack()">返回</el-button>

        <el-card style="margin-top: 20px;" shadow="always" :body-style="{ padding: '20px' }">
          <!-- card body -->
          <span class="base-info-title">课程编号：</span>{{ baseInfo.course_teacher_num }}
          <span class="base-info-title">&nbsp;&nbsp;课程名称：</span>{{ baseInfo.course_name }}
          <span class="base-info-title">&nbsp;&nbsp;开课学院：</span>{{ baseInfo.school_name }}
          <span class="base-info-title">&nbsp;&nbsp;开课专业：</span>{{ baseInfo.class_name }}
        </el-card>

        <el-card style="margin-top: 20px;" shadow="always" :body-style="{ padding: '20px' }">
          <div slot="header">
            <el-row :gutter="20">
              <el-col :span="5" :offset="0">
                <el-input class="rate" v-model="scoreRate" placeholder="请输入考试成绩占比" size="medium" clearable>
                  <template slot="prepend">考试成绩占比：</template>
                </el-input>
              </el-col>
              <el-col :span="4" :offset="15">
                <el-button type="primary" size="small" @click="dataSave()">保存</el-button>
                <el-button type="primary" size="small" @click="dataSubmit()">提交</el-button>
              </el-col>
            </el-row>
          </div>

          <!-- card body -->
          <!-- 学生列表 -->
          <el-table
            :data="studentScoreTable"
            style="width: 100%;"
            :header-cell-style="{background:'#F3F4F7'}"
            border>
            <el-table-column
              label="#"
              align="center"
              type="index">
            </el-table-column>
            <el-table-column
              label="学号"
              align="center"
              prop="student_num"
              width="">
            </el-table-column>
            <el-table-column
              label="姓名"
              align="center"
              prop="name"
              width="">
            </el-table-column>
            <el-table-column
              prop="class_name"
              align="center"
              label="学生专业">
            </el-table-column>
            <el-table-column
              label="更改时间"
              prop="update_time"
              align="center">
            </el-table-column>
            <el-table-column
              label="平时成绩"
              width="100"
              align="center">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.usualScore" size="small" clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="考试成绩"
              width="100"
              align="center">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.examScore" size="small" clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="综合成绩"
              align="center">
              <template slot-scope="scope">
                {{ Math.round(parseInt(scope.row.examScore) * scoreRate + parseInt(scope.row.usualScore) * (1 - scoreRate)) || '-' }}
              </template>
            </el-table-column>
            <el-table-column
              label="是否缺考"
              align="center">
              <template slot-scope="scope">
                <el-radio-group
                  v-model="scope.row.is_absent"
                  size="mini">
                  <el-radio-button :label="0">到场</el-radio-button>
                  <el-radio-button :label="1">缺考</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            background
            style="float: right; padding: 10px;"
            :page-size="10"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :total="totalStudent">
          </el-pagination>

        </el-card>

      </el-main>

    </el-container>
  </div>
</template>

<script>
import { toDateString } from '@/utils/time.js'
export default {
  data () {
    return {
      menuList: [
        {
          id: '1',
          name: '成绩查询'
          // path: '/manager/course'
        }, {
          id: '2',
          name: '成绩查卷申请'
        }, {
          id: '3',
          name: '等级考试成绩'
        }, {
          id: '4',
          name: '成绩认定'
        }
      ],
      iconsObject: {
        1: 'el-icon-user',
        2: 'el-icon-edit-outline',
        3: 'el-icon-tickets',
        4: 'el-icon-setting'
      },
      isCollapse: false,
      activeMenu: '成绩查询',
      // 当前的这个打分记录的id主键
      id: 0,
      baseInfo: {},
      scoreRate: 0.6,
      studentScoreTable: [],
      // 所有的学生数
      totalStudent: 0,
      currentPage: 1
    }
  },
  created () {
    this.getScoreTable()
  },
  methods: {
    // 返回
    goBack () {
      // 去除所有的记录
      window.localStorage.clear()
      this.$router.push('/teacher/setscoreentry')
    },

    // 获取所有的参考学生列表
    async getScoreTable () {
      this.id = window.localStorage.getItem('examId')
      const { data: res } = await this.$http.post(`score/teacher/getStudentById?page=${this.currentPage - 1}&rows=10&id=${this.id}`)
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.totalStudent = res.detail.studentScoreList.total
      this.baseInfo = res.detail.score
      this.studentScoreTable = this.foreachObj(res.detail.studentScoreList.list)
    },

    // 保存所有的打分
    dataSave () {
      var setScoreList = []
      this.studentScoreTable.forEach((item, index) => {
        var scoreRecord = {
          examScore: 80,
          id: 0,
          isAbsent: 0,
          usualScore: 90
        }
        scoreRecord.id = item.id
        scoreRecord.examScore = item.examScore
        scoreRecord.usualScore = item.usualScore
        scoreRecord.isAbsent = item.is_absent
        // console.log(scoreRecord)
        setScoreList.push(scoreRecord)
      })
      this.$http({
        method: 'post',
        url: `score/teacher/saveScore?id=${this.id}&examScoreRatio=${this.scoreRate}`,
        data: setScoreList
      }).then(resp => {
        const res = resp.data
        // console.log(res)
        if (!res.state) return this.$message.error(res.msg)
        this.$message.success('保存成功！')
        this.getScoreTable()
      })
    },

    // 提交打分
    async dataSubmit () {
      const { data: res } = await this.$http.post(`score/teacher/submitScore?id=${this.id}`)
      // console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.$message.success('提交成功！')
      this.$router.push('/teacher/setscoreentry')
    },

    // 更改当前页
    handleCurrentChange (page) {
      this.currentPage = page
      // 在跳转之前就进行数据的保存
      this.dataSave()
    },

    // 对后端数据进行处理
    foreachObj (data) {
      data.map(item => {
        item.create_time = toDateString(item.create_time)
        item.update_time = toDateString(item.update_time)
        // 这里暂时全部传入字符串，也就是说每次需要parseInt
        if (item.exam_score) {
          item.examScore = item.exam_score
        }
        if (item.usual_score) {
          item.usualScore = item.usual_score
        }
      })
      return data
    }
  }
}
</script>

<style lang="less" scoped>
.manager-container {
  height: 90vh;
  background-color: #f0f1f7;

  .el-aside {
    background-color: #C0C4CC;

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    .base-info-title {
      color: rgb(63, 51, 51);
      font-weight: 800;
    }

    .rate /deep/ .el-input-group__prepend {
      // width: 200px;
      padding: 0 10px;
    }
  }
}
</style>
